<template>
  <div>
    <nav class="navbar bg-body-tertiary">
      <div class="container">
        <div class="leftFlex">
          <img
            src="https://www.wzxfpx.com/wp-content/uploads/2023/05/wKj0iWKq8zuAEgYqAAApjSCoBoo238.png"
            style="width: 285px; height: 69px"
            alt=""
          />

          <div class="none" style="width: 100%; display: none"></div>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <ul class="twoFlex">
            <!-- 单 -->
            <template v-for="(item, index) in navbar" :key="index">
              <li class="nav-item hover" v-if="!item.children">
                <a
                  @click="active(index)"
                  style="cursor: pointer"
                  class="nav-link active"
                  :class="{ active99: num === index }"
                  aria-current="page"
                  >{{ item.name }}</a
                >
              </li>
              <!-- 双 -->
              <li class="nav-item dropdown hover" id="hoverTwo" v-else>
                <a
                  class="nav-link dropdown-toggle"
                  @click="active(index)"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  {{ item.name }}
                </a>
                <ul class="dropdown-menu">
                  <li
                    v-for="(item2, index2) in item.children"
                    :key="index"
                    @click="active2(item2)"
                    class="likuan"
                  >
                    <a class=" ">{{ item2.name }}</a>
                  </li>
                </ul>
              </li>
            </template>
          </ul>
        </div>

        <div
          class="offcanvas bg offcanvas-end"
          tabindex="-1"
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div class="offcanvas-header">
            <!-- a -->
            <img
              src="https://www.wzxfpx.com/wp-content/uploads/2023/05/wKj0iWKq8zuAEgYqAAApjSCoBoo238.png"
              style="width: 17.8125rem; height: 4.3125rem; margin: 0 auto"
              alt=""
            />
            <!-- <button
              type="button"
              class="btn-close"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
            ></button> -->
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <!-- 单 -->
              <template v-for="(item, index) in navbar" :key="index">
                <li class="nav-item" v-if="!item.children">
                  <a
                    @click="active(index)"
                    class="nav-link active pad"
                    aria-current="page"
                    style="color: #00709e"
                    >{{ item.name }}</a
                  >
                </li>
                <!-- 双 -->
                <li class="nav-item dropdown" v-else>
                  <a
                    class="nav-link dropdown-toggle pad"
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    id="hoverTwo"
                  >
                    {{ item.name }}
                  </a>
                  <ul class="dropdown-menu">
                    <li v-for="(item2, index2) in item.children">
                      <a class="dropdown-item" href="#" style="color: #00709e">
                        {{ item2.name }}
                      </a>
                    </li>
                  </ul>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { navigateTo } from "nuxt/app";

const router = useRouter();
const route = useRoute();

let num = ref(0);
let navbar = ref([
  { name: "首页", path: "/" },
  { name: "学院简介", path: "/schintro" },
  {
    name: "培训项目",
    path: "/trainpro/3",
    children: [
      { name: "消防设施操作员培训", path: "/trainpro/12",name1:'中级消防设施操作员' },
      { name: "消防安全管理员培训", path: "/trainpro/9",name1 :'注册消防工程师'},
      { name: "社会消防安全培训", path: "/trainpro/7",name1:'社会消防安全培训'},
      { name: "安全生产培训", path: "/trainpro/6",name1:'安全生产培训'},
    ],
  },
  { name: "培训案例", path: "/traincase/2" },
  { name: "师资力量", path: "/teacherpower" },
  {
    name: "新闻中心",
    path: "/newscenter/7",
    children: [
      { name: "学院动态", path: "/newscenter/4" },
      { name: "行业动态", path: "/newscenter/14" },
      { name: "消防知识", path: "/newscenter/10" },
      { name: "案例警示", path: "/newscenter/8" },
    ],
  },
  {
    name: "在线学习",
    path: "/study/1",
    children: [{ name: "消防设施操作员", path: "11" }],
  },
  { name: "联系我们", path: "/callus", children: [{ name: "结业信息查询" }] },
]);

const active = async (i: number) => {
  num.value = i;
  let path = navbar.value[i].path;

  await navigateTo({
    path: path,
    query: {
      title: navbar.value[i].name,
    },
  });
  router.go(0); // 刷新
};

async function active2(i: any) {
  console.log(route, "shabi");
  let title = i.name;
  let path = i.path;


 
    await navigateTo({
      path: path,
      query: {
        title: title,
      },
    });

    router.go(0);
  
}
</script>

<style scoped lang="scss">
/* .fixed-top {
  position: sticky;
  top: 0;
} */
ul {
  list-style: none;
  margin-top: 20px;
}
.leftFlex {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-wrap: wrap;
}
.twoFlex {
  display: flex;
  width: 51.25rem;
  justify-content: space-evenly;
  align-items: center;

  font-weight: bolder;

  .active99 {
    background: linear-gradient(to right, #6ad3fc, #00acf2) no-repeat left
      bottom;
    background-size: 100% 4px;
  }

  .hover {
    color: #00709e;

    background: linear-gradient(
        to right,
        rgba(108, 214, 253, 0.3),
        rgba(0, 176, 240, 0.494)
      )
      no-repeat left bottom;
    background-size: 0 3px;
    transition: all 0.3s;

    &:hover {
      background: linear-gradient(
          to right,
          rgb(108, 214, 253, 1),
          rgba(0, 175, 240, 1)
        )
        no-repeat left bottom;
      background-size: 100% 4px;
    }
  }

  .dropdown-menu {
    padding: 0;
    .likuan {
      padding: 12px 7px;
      a {
        color: #00709e;
        text-decoration: none;
        font-weight: 100;
      }
      &:hover {
        background-color: #20b9f4;
      }
    }
  }
  .nav-link {
    padding: 4px 0px;
  }
}
.navbar-toggler {
  display: none;
}
.pp {
  z-index: 99999;
  background-color: #fff;
}
@media (min-width: 576px) and (max-width: 1199px) {
  .none {
    display: block;
  }
}
@media (min-width: 150px) and (max-width: 770px) {
  .twoFlex {
    display: none;
  }
  .navbar-toggler {
    display: block;
  }
  .none {
    display: none;
  }
  .leftFlex {
    justify-content: space-between;
  }
}

.bg {
  color: #00709e;
}
.pad {
  color: #00709e;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 40px;
  border-top-width: 0px;
  border-top-color: #808080;
  border-top-style: solid;
  border-right-width: 0px;
  border-right-color: #808080;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #808080;
  border-bottom-style: solid;
  border-left-width: 0px;
  border-left-color: #808080;
  border-left-style: solid;
  font-size: 14px;
  v-deep &:active {
    color: #00709e;
  }
}
#hoverTwo:hover ul {
  // background-color: red;
  display: block;
}
#hoverTwo ul {
  margin-top: -0px;
}
</style>
